<template>
    <div class="sub-div-center">
        <diV class="sub-div-center listdiv">
            <div class="item-lift ">
                <el-image src="https://www.hexindev.fun/static/index/20007.png" fit="fill">
                    <template #error>
                        <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                        </div>
                    </template>
                </el-image>
            </div>
            <div style="flex-wrap:wrap; background-color: #CCC;" class="sub-div-center item-right">
                <div class="item-right-item" v-for="item in datalist">
                    <el-image :src="item.url" fit="fill">
                        <template #error>
                            <div class="image-slot">
                            <el-icon><icon-picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </div>
            </div>
        </diV>
    </div>
</template>

<script setup>
import { Picture as IconPicture } from '@element-plus/icons-vue'
var datalist = [
  { 'url': 'https://www.hexindev.fun/static/index/20001.png', 'to': '2' },
  { 'url': 'https://www.hexindev.fun/static/index/20002.png', 'to': '2' },
  { 'url': 'https://www.hexindev.fun/static/index/20003.png', 'to': '2' },
  { 'url': 'https://www.hexindev.fun/static/index/20004.jpg', 'to': '1' },
  { 'url': 'https://www.hexindev.fun/static/index/20005.jpg', 'to': '1' },
  { 'url': 'https://www.hexindev.fun/static/index/20006.jpg', 'to': '3' }
];
</script>

<style scoped>
.el-image{
    height: 100%;
    width: 100%;
}
.listdiv {
    width: var(--content-width);
}

.item-lift{
    height: calc(0.5 *  var(--content-width));
    width: calc(0.25 *  var(--content-width));
    background-color:#CCC;
    box-sizing: border-box;
    
}

.item-right{
    height: calc(0.5 *  var(--content-width));
    width: calc(0.75 *  var(--content-width));
    justify-content: space-around;
}

.item-right-item{
    height: calc(0.24 *  var(--content-width));
    width: calc(0.24 *  var(--content-width));
    box-sizing: border-box;
}

.item-right-item:hover{
    opacity:var(--opacity);
}

.item-lift:hover{
    opacity:var(--opacity);
}

</style>